/* 颜色变量定义 */
:root {
  /* 主色调 */
  --primary-color: #409eff;
  --primary-light: #66b1ff;
  --primary-dark: #337ecc;
  
  /* 辅助色 */
  --success-color: #67c23a;
  --warning-color: #e6a23c;
  --danger-color: #f56c6c;
  --info-color: #909399;
  
  /* 中性色 */
  --white: #ffffff;
  --black: #000000;
  --gray-1: #f5f7fa;
  --gray-2: #f0f2f5;
  --gray-3: #e4e7ed;
  --gray-4: #dcdfe6;
  --gray-5: #c0c4cc;
  --gray-6: #909399;
  --gray-7: #606266;
  --gray-8: #303133;
  
  /* 背景色 */
  --background-color: var(--gray-1);
  --card-background: var(--white);
  
  /* 文字颜色 */
  --text-primary: var(--gray-8);
  --text-regular: var(--gray-7);
  --text-secondary: var(--gray-6);
  --text-placeholder: var(--gray-5);
  
  /* 边框颜色 */
  --border-color: var(--gray-3);
  
  /* 阴影 */
  --box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --box-shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  
  /* 字体 */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-large: 16px;
  --font-weight-primary: 500;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
}

/* 白色主题 */
.theme-white {
  --primary-color: #409eff;
  --primary-light: #66b1ff;
  --primary-dark: #337ecc;
  
  /* 背景色 */
  --background-color: var(--gray-1);
  --card-background: var(--white);
  
  /* 文字颜色 */
  --text-primary: var(--gray-8);
  --text-regular: var(--gray-7);
  --text-secondary: var(--gray-6);
  --text-placeholder: var(--gray-5);
  
  /* 边框颜色 */
  --border-color: var(--gray-3);
}

/* 黑色主题 */
.theme-dark {
  --primary-color: #409eff;
  --primary-light: #66b1ff;
  --primary-dark: #337ecc;
  
  /* 背景色 */
  --background-color: #1a1a1a;
  --card-background: #2d2d2d;
  
  /* 文字颜色 */
  --text-primary: #ffffff;
  --text-regular: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-placeholder: #888888;
  
  /* 边框颜色 */
  --border-color: #444444;
}

/* 绿色主题 */
.theme-green {
  --primary-color: #67c23a;
  --primary-light: #85ce61;
  --primary-dark: #4e9c2d;
  
  /* 背景色 */
  --background-color: #f0f9f0;
  --card-background: #ffffff;
  
  /* 文字颜色 */
  --text-primary: #333333;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #c0c4cc;
  
  /* 边框颜色 */
  --border-color: #d1edc4;
}

/* 基本排版样式 */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  margin: 0;
  line-height: 1.2;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 16px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 12px;
}

p {
  margin: 0;
}

.content-main{
  overflow-y: auto;
  min-width: 800px; /* 确保内容区域不会过窄 */
  height: calc(100vh - 100px);
}
/* 响应式设计 */

/* 大屏幕 (>1200px)：标准桌面布局 */
@media (min-width: 1201px) {
  .main-content {
    flex-direction: row;
  }
  
  .side-menu {
    width: 200px;
    display: block !important;
  }
  
  .content {
    flex: 1;
  }
  
  .top-menu-center {
    display: flex;
  }
  
  .search-box {
    width: 300px;
  }
}

/* 中等屏幕 (992px-1200px)：适当压缩边栏宽度 */
@media (min-width: 992px) and (max-width: 1200px) {
  .side-menu {
    width: 180px;
  }
  
  .search-box {
    width: 250px;
  }
}

/* 小屏幕 (768px-991px)：边栏可折叠 */
@media (min-width: 768px) and (max-width: 991px) {
  .side-menu {
    width: 60px;
  }
  
  .profile-info {
    display: none;
  }
  
  .signature {
    display: none;
  }
  
  .el-menu-item span,
  .el-sub-menu__title span {
    display: none;
  }
  
  .el-menu-item i,
  .el-sub-menu__title i {
    margin-right: 0;
  }
  
  .search-box {
    width: 200px;
  }
}

/* 移动端 (<768px)：单页显示，侧边栏隐藏 */
@media (max-width: 767px) {
  .main-content {
    flex-direction: column;
  }
  
  .side-menu {
    width: 100%;
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: none;
  }
  
  .side-menu.mobile-visible {
    display: block;
  }
  
  .content {
    margin-bottom: 60px;
  }
  
  .top-menu {
    height: 50px;
    padding: 5px 10px;
  }
  
  .logo-text {
    display: none;
  }
  
  .top-menu-center {
    display: none;
  }
  
  .window-controls {
    display: none;
  }
  
  .user-info {
    padding: 2px 5px;
  }
  
  .user-avatar {
    width: 24px;
    height: 24px;
  }
  
  .user-name {
    display: none;
  }
  
  .profile-header {
    padding: 10px;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
  }
  
  .username {
    font-size: 14px;
  }
  
  .signature {
    font-size: 10px;
  }
  
  .el-menu-vertical {
    height: 60px;
    display: flex;
    justify-content: space-around;
  }
  
  .el-menu-item {
    height: 60px;
    line-height: 60px;
    text-align: center;
    padding: 0 !important;
  }
  
  .el-menu-item i {
    margin-right: 0;
    font-size: 20px;
  }
  
  .el-menu-item span {
    display: none;
  }
  
  .el-sub-menu__title {
    display: none;
  }
  
  .el-sub-menu .el-menu {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .chat-header {
    padding: 5px 10px;
    height: 50px;
  }
  
  .user-details {
    display: none;
  }
  
  .chat-actions .el-button {
    padding: 8px;
    font-size: 14px;
  }
  
  .message-item {
    max-width: 90%;
  }
  
  .chat-input {
    padding: 10px;
  }
  
  .input-actions {
    margin-bottom: 5px;
  }
  
  .input-container .el-textarea__inner {
    font-size: 14px;
  }
  
  .send-tip {
    display: none;
  }
  
  .friends-header,
  .groups-header,
  .rooms-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-actions {
    margin-top: 10px;
  }
  
  .el-button {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .group-item,
  .room-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .group-info,
  .room-info {
    width: 100%;
    margin: 10px 0;
  }
  
  .group-actions,
  .room-actions {
    align-self: flex-end;
  }
  
  .friend-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .friend-info {
    width: 100%;
    margin: 10px 0;
  }
  
  .friend-status {
    margin: 5px 0;
  }
  
  .friend-actions {
    align-self: flex-end;
  }
  
  .settings-content {
    margin-bottom: 60px;
  }
  
  .setting-control {
    width: auto;
  }
}

/* 额外的小屏幕优化 */
@media (max-width: 480px) {
  .el-dialog {
    width: 90% !important;
    margin: 20px auto !important;
  }
  
  .el-message-box {
    width: 90% !important;
  }
  
  .message-text {
    font-size: 13px;
  }
  
  .el-form-item__label {
    font-size: 13px;
  }
  
  .el-input__inner {
    font-size: 13px;
  }
}

/* 间距变量定义 */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
}

/* 基本布局样式 */
.container {
  width: 100%;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* 动画和过渡效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from {
  transform: translateX(20px);
  opacity: 0;
}

.slide-fade-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}

.slide-enter-from {
  transform: translateX(100%);
}

.slide-leave-to {
  transform: translateX(-100%);
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* 按钮悬停效果 */
.btn-hover-effect {
  transition: all 0.3s ease;
}

.btn-hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 菜单项悬停效果 */
.menu-item-hover-effect {
  transition: all 0.3s ease;
}

.menu-item-hover-effect:hover {
  background-color: #f0f7ff;
  transform: translateX(5px);
}

/* 列表项悬停效果 */
.list-item-hover-effect {
  transition: all 0.3s ease;
}

.list-item-hover-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* 对话框弹跳效果 */
.dialog-bounce-effect {
  animation: bounce-in 0.5s;
}